<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
    >
      <el-form :model="form" ref="elForm" :rules="rules" label-width="80px">
        <el-form-item label="视频" prop="sVideoPath">
          <upload-video
            @onVideoChange="onVideoChange"
            :videoUrl="form.sVideoPath"
          ></upload-video>
        </el-form-item>
        <el-form-item label="显示时长" prop="iDisplayTime">
          <el-input
            style="width: 200px"
            v-model="form.iDisplayTime"
            type="number"
            placeholder="请输入显示时长"
            @input="numberChange(arguments[0], 60)"
          >
            <template slot="append">秒</template>
          </el-input>
          <!-- <el-input-number
            v-model="form.iDisplayTime"
            :step="1"
            controls-position="right"
            step-strictly
            :min="0"
          /> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit('elForm')">确 定 </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import uploadVideo from "./uploadVideo.vue";
import {
  addMediaVideoSettingApi,
  editMediaVideoSettingApi,
} from "@/api/network";
export default {
  name: "MvCloudgateTerminalAddPictureDialog",
  components: {
    uploadVideo,
  },
  data() {
    return {
      title: "",
      dialogFormVisible: false,
      form: {
        sVideoPath: "",
        iDisplayTime: 1,
      },
      rules: {
        sVideoPath: [{ required: true, message: "不能为空" }],
        iDisplayTime: [
          { required: true, message: "显示时长不能为空" },
          { type: "number", message: "显示时长必须为数字值" },
        ],
      },
      params: {
        sVideoPath: "",
        iDisplayTime: 1,
      },
    };
  },

  mounted() {},

  methods: {
    numberChange(val, maxNum) {
      //转换数字类型
      this.form.iDisplayTime = Number(val);
      //重新渲染
      this.$nextTick(() => {
        //比较输入的值和最大值，返回小的
        let num = Math.min(Number(val), maxNum);
        //输入负值的情况下， = 0（可根据实际需求更该）
        if (num < 0) {
          this.form.iDisplayTime = 1;
        } else {
          //反之
          this.form.iDisplayTime = num;
        }
      });
    },
    reset() {
      this.form = {
        sVideoPath: "",
        iDisplayTime: 1,
      };
    },
    open(title, row) {
      this.reset();
      // console.log(this.form);
      this.dialogFormVisible = true;
      this.title = title;
      if (row) {
        this.form = { ...row };
      }
      this.params = { ...this.form };
    },
    cancel() {
      this.dialogFormVisible = false;
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          switch (this.title) {
            case "新增":
              this.addMediaPictureSetting();
              break;
            case "修改":
              this.editMediaPictureSetting();
              break;
            default:
              break;
          }
        } else {
          return false;
        }
      });
    },
    editMediaPictureSetting() {
      // console.log(this.form);
      let formData = new FormData();
      formData.append("sVideoPath", this.params.sVideoPath);
      formData.append("iDisplayTime", this.form.iDisplayTime);
      // formData.append("id", this.form.id);
      formData.append("iSequenceNumber", 0);
      editMediaVideoSettingApi(formData, this.form.id).then((res) => {
        this.$message.success("修改成功");
        this.cancel();
        this.$emit("getMediaVideoSetting", "");
      });
    },
    addMediaPictureSetting() {
      let formData = new FormData();
      formData.append("sVideoPath", this.params.sVideoPath);
      formData.append("iDisplayTime", this.form.iDisplayTime);
      formData.append("iSequenceNumber", 0);

      addMediaVideoSettingApi(formData).then((res) => {
        // console.log(res);
        this.$message.success("新增成功");
        this.cancel();
        this.$emit("getMediaVideoSetting", "");
      });
    },
    onVideoChange(file) {
      // console.log(file);
      this.params.sVideoPath = file.raw;
      this.form.sVideoPath = URL.createObjectURL(file.raw);
      this.$refs.elForm.validateField('sVideoPath');
      // this.form.sVideoPath = "1";
      // console.log(this.params);
    },
  },
};
</script>

<style lang="scss" scoped></style>
